<%--
  Created by IntelliJ IDEA.
  User: ddd
  Date: 2018/4/19
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap-table.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/jquery.treegrid.min.css">
</head>

<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="admin-container">
        <div class="row">
            <div class="col-md-3">
            </div>
            <div class="col-md-5"></div>
            <div class="col-md-1">
                <button class="btn btn-success" onclick='AddOrganizationOne()'>新增省级单位</button>
            </div>
            <div class="col-md-1">
                <button class="btn btn-primary" onclick='AddOrganizationTwo()'>新增市级单位</button>
            </div>
            <div class="col-md-1">
                <button class="btn btn-warning" onclick='AddOrganizationThree()'>新增加盟商</button>
            </div>
            <div>
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap-table-treegrid.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.treegrid.min.js"></script>

<script type="text/javascript">
    var $table = $('#table');
    $(function () {
        $table.bootstrapTable({
            contentType: 'application/json;charset=UTF-8',
            url: '/area',
            type: 'GET',
            dataType: "json",
            height: $(window).height(),
            striped: true,
            sidePagination: 'server',
            idField: 'id',
            columns: [
                {
                    field: 'name',
                    title: '名称'
                },
                {
                    field: 'button',
                    title: '操作',
                    events: 'operateEvents',
                    formatter: 'Editor'
                }
            ],
            treeShowField: 'name',
            parentIdField: 'parent',
            onLoadSuccess: function (data) {
//                $table.treegrid('collapseAll');
                $table.treegrid({
                    treeColumn: 0,
                    expanderExpandedClass: 'glyphicon glyphicon-minus',
                    expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });
            }
        });
    });

    //操作列
    function Editor(value, row, index) {
        return [
            '<button id="TableEditor"  type="button" class="btn btn-xs btn-success">编辑</button>&nbsp;&nbsp;',
            '<button id="TableDelete"  type="button" class="btn btn-xs btn-danger">删除</button>'
        ].join("")
    }

    var arr = [];
    window.operateEvents = {
        "click #TableEditor": function (e, value, row, index) {
//            console.info(index);
            layer.open({
                type: 2,
                title: '编辑信息',
                area: ['400px', '200px'],
                fixed: false, //不固定
                maxmin: true,
                content: "/page/organization/organization_editArea.jsp?row.id=" + row.id
            });
        },
        "click #TableDelete": function (e, value, row, index) {
            /**
             * 删除单个区域
             */
            arr = [];
            gainTreeIds(row);
            if(row._nodes.length>0){
            var ind =layer.confirm('确定删除'+'"'+row.name+'"'+'及其所有下属内容',{
                btn: ['确定', '取消']},function () {
                $.each(arr, function (k, v) {
                    $.ajax({
                        url: '/area',
                        type: 'POST',
                        data: {
                            id: v,
                            _method: 'DELETE'
                        },
                        success:function () {
                            $('#table').bootstrapTable('refresh');
                            layer.msg('操作成功', {icon: 1, time: 1000});
                            layer.close(ind);
                        },
                        error: function () {
                            layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
                        }
                    });

                })
            },function () {
                layer.msg('取消操作成功', {icon: 1, time: 1000});
            });
        }else{
                var ind = layer.confirm('确定是否删除'+'"'+row.name+'"', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/area',
                        type: 'POST',
                        data: {
                            id: row.id,
                            _method: 'DELETE'
                        },
                        success:function () {
                            $('#table').bootstrapTable('refresh');
                            layer.msg('操作成功', {icon: 1, time: 1000});
                            layer.close(ind);
                        },
                        error: function () {
                            layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
                        }
                    });
                }, function () {
                    layer.msg('取消操作成功', {icon: 1, time: 1000});
                });
            }

        }
    };

    function gainTreeIds(row1) {
        arr.push(row1.id);
        for (var i = 0; i < row1._nodes.length; i++) {
            gainTreeIds(row1._nodes[i]);
        }
    };

    function AddOrganizationOne() {
        layer.open({
            type: 2,
            title: '添加省份',
            area: ['400px', '200px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/organization/organization_addArea1.jsp"
        });
    }

    function AddOrganizationTwo() {
        layer.open({
            type: 2,
            title: '添加市县',
            area: ['600px', '300px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/organization/organization_addArea2.jsp"
        });
    }

    function AddOrganizationThree() {
        layer.open({
            type: 2,
            title: '添加加盟商',
            area: ['600px', '320px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/organization/organization_addArea3.jsp"
        });
    }


</script>


</body>

</html>
